import React, { useState, useContext, useReducer, useEffect } from 'react'
import { Button, Input } from 'antd'
import MyContext from '../libs/context'
// import GrandSon from './grandson'

// useReducer 类似于 reducer

// function countReducer(state, action) {
//   switch(action.type) {
//     case 'add':
//       console.log(state, 'state----state')
//       state++
//       return state
//     case 'remove':
//       state--;
//      return state
//     default: 
//     return {...state}    
//   }
// }

export default () => {
  let [count, setCount] = useState(0) // 一般定义基本类型数据
  let [name, setName] = useState('devin');
  // let contextValue = useContext(MyContext)

  let { store, dispatch } = useContext(MyContext)

  // let [state, dispatch] = useReducer(countReducer, 0)
  // console.log(state, 'satet----state----')

  /**
   * componentDidMount    dom
   * componentUpdate      更新
   * componentWillUnMount 卸载
  */
  useEffect(() => {
    console.log('did- mount')
    return () => console.log('un-mount')
    // componentDidMount
    // let time = setInterval(() => {
    //   setCount(count + 1)
    // }, 1000)
    // return () => clearInterval(time) //  componentWillUnMount
  }, [])  // componentUpdate

  return <div>child

    {/* <GrandSon></GrandSon> */}

    <h1>
      {count} : ----
      {store.count}
      {/* {contextValue} */}
    </h1>
    {/* <h2>state:  {state}</h2> */}
    <Button onClick={() => setCount(count + 1)}>提交</Button>

    <Button onClick={() => dispatch({ type: 'add' })}>添加数据</Button>
    <Button onClick={() => dispatch({ type: 'remove' })}>减少数据</Button>

    <Input value={name} onChange={(e) => setName(e.target.value)} />

  </div>
}